<template>
  <dv-full-screen-container>
    <div class="main">
      <!-- 头部 -->
      <div class="header-box">
        <header-component />
      </div>
      <!-- 内容区域 -->
      <div class="content-box">
        <!-- 左侧 -->
        <div class="left-box">
          <!-- 本周矛盾纠纷统计 -->
          <div class="statistics">
            <statistics-component />
          </div>
          <!-- 案件分类情况 -->
          <div class="classification">
            <classification-component />
          </div>
        </div>
        <!-- 中间 -->
        <div class="center-box">
          <!-- 地图 -->
          <div class="map">
            <map-component />
          </div>
          <!-- 涉及特殊群体情况 or 不同主体调解情况 -->
          <div class="special-topicmediation">
            <!-- 涉及特殊群体情况 -->
            <div class="special">
              <special-component />
            </div>
            <!-- 不同主题调解情况 -->
            <div class="topicmediation">
              <topic-mediation-component />
            </div>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="right-box">
          <!-- 来电信访涉及矛盾调解情况 -->
          <div class="mediate">
            <mediate-component />
          </div>
          <!-- 案件来源 -->
          <div class="source">
            <source-component />
          </div>
          <!-- 协议形式/协议履行情况 -->
          <div class="protocol">
            <protocol-component />
          </div>
        </div>
      </div>
    </div>
  </dv-full-screen-container>
</template>

<script>
import Header from '@/components/Header'
import Classification from '@/components/Classification'
import Map from '@/components/Map'
import Mediate from '@/components/Mediate'
import Protocol from '@/components/Protocol'
import Source from '@/components/Source'
import Special from '@/components/Special'
import Statistics from '@/components/Statistics'
import TopicMediation from '@/components/TopicMediation'

export default {
  name: 'Main',
  components: {
    HeaderComponent: Header,
    ClassificationComponent: Classification, // 案件分类情况
    MapComponent: Map, // 地图
    MediateComponent: Mediate, // 来电信息涉及矛盾调解情况
    ProtocolComponent: Protocol, // 协议形式/协议履行情况
    SourceComponent: Source, // 案件来源
    SpecialComponent: Special, // 特殊群体情况
    StatisticsComponent: Statistics, // 本周矛盾纠纷数据统计
    TopicMediationComponent: TopicMediation // 不同主题调解情况
  },
  data () {
    return {
      hello: '你好'
    }
  },
  created () {}
}
</script>

<style scoped>
@font-face {
  font-family: BBT;
  src: url('../assets/优设字由棒棒体.otf');
}
@font-face {
  font-family: V07;
  src: url('../assets/cpmono_v07bold.otf');
}
/* 主容器 */
.main {
  height: 100vh;
  width: 100%;
  background: #030434;
}
.main::-webkit-scrollbar {
  display: none; /* Chrome Safari */
  overflow: none;
}

/* 头部 */
.header-box {
  height: 10vh;
  width: 100%;
}

/* 内容区域 */
.content-box {
  display: flex;
  justify-content: space-between;
  height: 90vh;
  width: 100%;
}

/* 左侧容器 */
.left-box {
  height: 100%;
  width: 25%;
}
.statistics {
  height: 50%;
  width: 100%;
}
.classification {
  height: 50%;
  width: 100%;
}

/* 中间容器 */
.center-box {
  height: 100%;
  width: 50%;
}
.map {
  height: 60%;
  width: 100%;
  display: flex;
  justify-content: center;
}
.special-topicmediation {
  height: 40%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.special {
  height: 100%;
  width: 50%;
}
.topicmediation {
  height: 100%;
  width: 50%;
}

/* 右侧容器 */
.right-box {
  height: 100%;
  width: 25%;
}
.mediate {
  height: 40%;
  width: 100%;
}
.source {
  height: 30%;
  width: 100%;
}
.protocol {
  height: 30%;
  width: 100%;
}
</style>
